<template>
  <div class="wrapper">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>会员管理</el-breadcrumb-item>
      <el-breadcrumb-item>会员权益设置</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="easy-content">
      <el-form :inline="true">
        <el-form-item>
          <el-input placeholder="请输入权益名称"
            style="width:300px"
            v-model="search"
            clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
            size="small"  @click="_search"
            style="width:60px">
            <i class="el-icon-search"
             ></i>
          </el-button>
        </el-form-item>
        <el-form-item class="fr">
          <el-button type="primary"
            size="small"
            @click="add" v-has="'memberclassrightsadd'">新增会员权益</el-button>
        </el-form-item>
        <el-form-item>
          <el-table :data="rightsList"
            max-height="550px"
            style="width: 100%">
            <el-table-column prop="typeName"
              label="权益类型">
            </el-table-column>
            <el-table-column prop="rightsName"
              label="权益名称">
            </el-table-column>
            <el-table-column prop="name"
              label="权益标签展示">
            </el-table-column>
            <el-table-column prop="remark"
              label="权益说明">
            </el-table-column>
            <el-table-column prop="priority"
              label="优先级显示">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text"
                  @click="_edit(scope.row)" v-has="'memberclassrightsup'">修改</el-button>
                <el-button type="text"
                  @click="_deleteMemberEquity(scope.row.id)" v-has="'memberclassrightsdelete'">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item class="fr">
          <el-pagination @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, prev , pager , next, sizes"
            :total="total">
          </el-pagination>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog :title="title" @close="reset('formRules')"
      :visible.sync="dialogVisible"
      width="500px">
      <el-form label-width="100px"
        :model="addEditData"
        ref="formRules"
        :rules="rules">
        <el-form-item label="权益类型"
          required>
          <el-select v-model="addEditData.type"
            :disabled="isEdit"
            @change="restData(addEditData.type)">
            <el-option label="房价"
              :value="1"></el-option>
            <el-option label="预留房间"
              :value="2"></el-option>
            <el-option label="延时退房"
              :value="3"></el-option>
            <el-option label="免押金"
              :value="4"></el-option>
            <el-option label="免退房"
              :value="5"></el-option>
            <el-option label="自定义"
              :value="6"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="会员权益"
          prop="rights">
          <span v-if="addEditData.type ==1">
            <el-input-number v-model="addEditData.rights"
              controls-position="right"
              :min="1"
               size="small" 
              :precision="1"
              :max="10"></el-input-number>&nbsp;&nbsp;
            <span>折</span>
          </span>
          <span v-if="addEditData.type ==2">
            <span>留至</span>
            <el-time-picker format="HH:mm"
              value-format="HH:mm"
              v-model="addEditData.rights">
            </el-time-picker>
          </span>
          <span v-if="addEditData.type ==3">
            <span>延至</span>
            <el-time-picker format="HH:mm"
              value-format="HH:mm"
              v-model="addEditData.rights">
            </el-time-picker>
          </span>
          <span v-if="addEditData.type == 4 || addEditData.type == 6 || addEditData.type == 5">
            <el-input placeholder="请输入会员权益"
              v-model="addEditData.rights"></el-input>
          </span>
        </el-form-item>
        <el-form-item label="权益标签展示"
          prop="name">
          <el-input placeholder="请输入权益标签"
           maxlength="20"
            v-model="addEditData.name"></el-input>
        </el-form-item>
        <el-form-item label="权益说明"
          prop="remark">
          <el-input placeholder="请输入权益标签"
            type="textarea"
            maxlength="200"
            v-model="addEditData.remark"></el-input>
        </el-form-item>
        <el-form-item label="优先级"
          prop="priority">
          <el-input-number v-model="addEditData.priority"
            controls-position="right"
            :min="1"
             size="small" 
            :max="100"></el-input-number>&nbsp;&nbsp;
        </el-form-item>

      </el-form>
      <span slot="footer"
        class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
          @click="sure('formRules')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getMemberEquityList,
  addMemberEquity,
  deleteMemberEquity
} from "@/public/js/member";

export default {
  components: {},
  props: {},
  data() {
    return {
      pageNo: 1,
      pageSize: 10,
      total: 0,
      search: "",
      type: "",
      id: "",
      dialogVisible: false,
      rightsList: [],
      title: "",
      isEdit: false,
      addEditData: {
        type: 1,
        rights: undefined,
        name: "",
        remark: "",
        priority: undefined
      },
      rules: {
        rights: [
          {
            required: true,
            message: "请输入会员权益",
            trigger: "blur"
          }
        ],
        name: [
          {
            required: true,
            message: "请输入权益标签",
            trigger: "blur"
          }
        ],
        remark: [
          {
            required: true,
            message: "请输入权益说明",
            trigger: "blur"
          }
        ],
        priority: [
          {
            required: true,
            message: "请输入优先级",
            trigger: "blur"
          }
        ]
      },
      tableData: [
        {
          type: 1,
          typeName: "房价",
          name: "≈8.5折",
          label: "房价8.5折",
          explain: "享受房价8.5折",
          level: 1
        }
      ]
    };
  },
  watch: {},
  computed: {},
  methods: {
    reset(formName){
       this.$refs[formName].resetFields();
    },
    // 保存
    sure(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          addMemberEquity(this.addEditData).then(res => {
            if (!res.data.errCode) {
              this.$message({
                type: "success",
                message: "操作成功"
              });
              this.dialogVisible = false;
              this._getMemberEquityList();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 删除
    _deleteMemberEquity(id) {
      this.$confirm("是否继续该删除操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteMemberEquity({ id, state: 3 }).then(res => {
          if (!res.data.errCode) {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this._getMemberEquityList();
          }
        });
      });
    },
    //获取列表数据
    _getMemberEquityList() {
      getMemberEquityList({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        search: this.search,
        type: this.type
      }).then(res => {
        this.total = res.data.total;
        this.rightsList = res.data.rightsList;
      });
    },
    _search() {
      this.pageNo = 1;
      this.pageSize = 10;
      this._getMemberEquityList();
    },
    //新增会员权益
    add() {
      this.title = "新增会员权益";
      this.isEdit = false;
      this.dialogVisible = true;
      this.id = "";
      this.addEditData = {
        id: this.id,
        type: 1,
        rights: undefined,
        name: "",
        remark: "",
        priority: undefined
      };
    },
    // 编辑
    _edit(data) {
      this.title = "编辑会员权益";
      this.isEdit = true;
      this.dialogVisible = true;
      this.addEditData = {
        id: data.id,
        type: data.type,
        rights: data.rights,
        name: data.name,
        remark:data.remark,
        priority:data.priority
      }
      console.log(data)
    },
    restData(type) {
      this.addEditData = {
        id: this.id,
        type: parseInt(type),
        rights: undefined,
        name: "",
        remark: "",
        priority: undefined
      };
    },
    //翻页
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this._getMemberEquityList();
    },
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo;
      this._getMemberEquityList();
    }
  },
  created() {
    this._getMemberEquityList();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.wrapper {
}
</style>